<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { getUserList, SysUser } from '@/api/sys-user'
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'
import useLoading from '@/hooks/loading'
import { Pagination } from '@/types/global'

const { loading, setLoading } = useLoading(true)

const formModel = ref<SysUser>({
  userId: undefined,
  name: '',
  nickName: '',
  phonenumber: undefined,
  status: undefined,
  beginEndTime: [],
  createTime: '',
  deptName: ''
})

const postForm = ref<SysUser>({
  beginEndTime: [],
  createTime: '',
  current: undefined,
  deptName: '',
  name: '',
  nickName: '',
  pageSize: undefined,
  phonenumber: undefined,
  status: undefined,
  userId: undefined
})

// 表数据
const list = ref<SysUser[]>([])
const visible = ref(false)

// 分页
const pagination = reactive<Pagination>({
  current: 1,
  pageSize: 10,
  total: 0
})

async function getList() {
  formModel.value.current = pagination.current
  formModel.value.pageSize = pagination.pageSize
  // 获取表格数据
  const { data, count } = await getUserList(formModel.value)
  list.value = data
  pagination.total = count
  setLoading(false)
}

function onPageChange(current: number) {
  pagination.current = current
  getList()
}

function rest() {
  pagination.pageSize = 10
  pagination.current = 1
  formModel.value = {
    name: '',
    phonenumber: undefined,
    status: undefined,
    beginEndTime: []
  }
  getList()
}

// 计算属性
const cloneColumns = ref<TableColumnData[]>([
  {
    title: '用户编号',
    dataIndex: 'userId'
  },
  {
    title: '用户名称',
    dataIndex: 'name'
  },
  {
    title: '用户昵称',
    dataIndex: 'nickName'
  },
  {
    title: '部门名称',
    dataIndex: 'deptName'
  },
  {
    title: '手机号码',
    dataIndex: 'phonenumber'
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'status'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime'
  },
  {
    title: '操作',
    dataIndex: 'operations',
    slotName: 'operations',
  },
])

getList()

</script>

<template>
  <div class="container">
    <Breadcrumb :items="['menu.system', 'menu.system.user']" />
    <a-card class="general-card" :title="$t('menu.system.user')">
      <a-row>
        <a-col :flex="1">
          <a-form :model="formModel">
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item field="name" :label="$t('user.name')">
                  <a-input
                    v-model="formModel.name"
                    :placeholder="$t('user.name.placeholder')"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="phonenumber" :label="$t('user.phonenumber')">
                  <a-input-number
                    v-model="formModel.phonenumber"
                    :placeholder="$t('user.phonenumber.placeholder')"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="status" :label="$t('user.status')">
                  <a-select
                    v-model="formModel.status" allow-clear
                    :placeholder="$t('user.status.placeholder')">
                    <a-option label="正常" :value="0" />
                    <a-option label="停用" :value="1" />
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="status" :label="$t('user.status')">
                  <a-range-picker
                    v-model="formModel.beginEndTime"
                    style="width: 254px; margin-bottom: 20px;"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
        <a-divider style="height: 84px" direction="vertical" />
        <a-col flex="86px" style="text-align: right">
          <a-space :size="18" direction="vertical">
            <a-button type="primary" @click="getList">
              <template #icon>
                <icon-search />
              </template>
              {{ $t('searchTable.form.search') }}
            </a-button>
            <a-button @click="rest">
              <template #icon>
                <icon-refresh />
              </template>
              {{ $t('searchTable.form.reset') }}
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-divider style="margin-top: 0" />
      <a-row style="margin-bottom: 16px">
        <a-col :span="12">
          <a-space>
            <a-button type="primary" @click="visible = true">
              <template #icon>
                <icon-plus />
              </template>
              {{ $t('searchTable.operation.create') }}
            </a-button>
          </a-space>
        </a-col>
        <a-col
          :span="12"
          style="display: flex; align-items: center; justify-content: end">
          <a-button>
            <template #icon>
              <icon-download />
            </template>
            {{ $t('searchTable.operation.download') }}
          </a-button>

        </a-col>
      </a-row>
      <!--      表单     -->
      <a-table
        row-key="userId"
        :loading="loading"
        :pagination="pagination"
        :columns="cloneColumns"
        :data="list"
        :bordered="false"
        size="medium"
        @page-change="onPageChange"
      >
      </a-table>

      <a-modal v-model:visible="visible" title="新增用户">
        <a-form :model="postForm">
          <a-form-item field="name" label="Name">
            <a-input v-model="postForm.name" />
          </a-form-item>
          <a-form-item field="post" label="Post">
            <a-select v-model="postForm.post">
              <a-option value="post1">Post1</a-option>
              <a-option value="post2">Post2</a-option>
              <a-option value="post3">Post3</a-option>
              <a-option value="post4">Post4</a-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-modal>

    </a-card>
  </div>

</template>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}
</style>